<template>
	<view style="width: 100%;background-color: #fff;">
		<view id="moments">


			<view class="moments__post">
				<view class="post-left">
					<image class="post_header" src="../../../static/images/qiandao.png"></image>
				</view>

				<view class="post_right">
					<text class="post-username">那年花开月正圆</text>
					<view id="paragraph" class="paragraph">美食花样多，诱人如北北；迎来小宇宙，幸福两行泪[喵喵]这可是小必的心声啊～</view>
					<!-- 相册 -->
					<view class="thumbnails">
						<view>
							<image class="gallery_img" lazy-load mode="aspectFill" src="../../../static/images/lv3.png" data-src="../../../static/images/lv3.png"
							 @tap="previewImage()"></image>
						</view>
					</view>
					<!-- 资料条 -->
					<view class="toolbar">
						<view class="timestamp">
							两个小时
							<text style="font-size: 13px;color: #FF5F49;padding-left: 10px;">删除</text>

						</view>
						<view class="like" @tap="like(index)">
							<image src="../../../static/images/dianzan_hei.png"></image>
							<text style="font-size: 13px;color: #333333;padding-left: 5px;">点赞</text>
						</view>
					</view>
					<!-- 赞／评论区 -->
					<view class="post-footer">
						<view class="footer_content">
							<image class="liked" src="../../../static/images/dianzan_lan.png"></image>
							<text class="nickname">小李</text>
						</view>
						<view class="footer_content">
								<image class="liked" src="../../../static/images/pinlun_lan.png"></image>
							<text class="comment-nickname">小红: <text class="comment-content">小张</text></text>
						</view>
					</view>
				</view>
				<!-- 结束 post -->
			</view>

			<view class="foot" v-show="showInput">
				<chat-input @send-message="send_comment" @blur="blur" :focus="focus" :placeholder="input_placeholder"></chat-input>
			</view>
			<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>

			<!--评论区-->
			<view class="speak">
				<input type='text' placeholder='评论点什么呢…' @focus="movePage" />
				<view style="font-size: 15px;color: #333333;">提交</view>
			</view>


		</view>
	</view>
</template>

<script>
	//

	import chatInput from '../../../components/im-chat/chatinput.vue'; //input框
	import postData from '../../../common/index/index.post.data.js'; //朋友圈数据

	export default {
		components: {
			chatInput
		},
		data() {
			return {
				tabList: ['一月', '二月', '七月', '八月', '九月', '十月', '十一月', '十二月'],

				posts: postData, //模拟数据

			}
		},
		mounted() {



		},
		onLoad() {

		},
		onShow() {

		},



		computed: {

		},
		methods: {
			movePage() {
				console.log("is focused");
				setTimeout(() => {
					document.body.scrollTop = document.body.scrollHeight;
				}, 300);
			},
		}
	}
</script>

<style scoped>
	@import url("../../../common/index/index.css");

	#moments {
		margin-top: 0;
	}

	#moments .moments__post .like {
		width: auto;
		height: auto;
		position: absolute;
		right: 0px;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		width: 77px;
		background-color: #F7F7F7;
		border-radius: 4px;
		padding: 10px;
		height: 26px;
		line-height: 26px;
	}

   .uni-input-placeholder{
	   font-size: 15px;
	   color: #C4C4C4;
   }

	#moments .moments__post .toolbar image {
		padding-left: 0;
	}

	.#moments .moments__post .toolbar .timestamp {
		font-size: 13px;
	}

	#moments .moments__post {
		border-bottom: none;
	}

	.speak {
		display: flex;
		flex-direction: row;
		position: fixed;
		bottom: 0px;
		background-color: #f7f7f7;
		width: 100%;
		    padding: 10px 17px 40px 17px;
		    justify-content: space-between;
		    align-items: center;
	}

	.speak input {
		width: 295px;
		height: 36px;
		background: rgba(255, 255, 255, 1);
		border-radius: 5px;
		padding: 0 10px;
	}
</style>
